<template>
  <div class="common-layout">
    <el-container>
      <!-- 顶部 Header -->
      <el-header>
        <Header/>
      </el-header>
      <el-container>
        <router-view/>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Menu from './views/Menu.vue';
import Header from './views/Header.vue'
import {useRoute} from 'vue-router';
import {computed, onMounted, watch} from 'vue';

export default {
  components: {
    Header,
    Menu,
  },
  setup() {
    const route = useRoute();
    const breadcrumbList = computed(() => {
      return route.matched.filter(item => item.meta && item.meta.title);
    });

    // 如果需要监听路由变化以更新面包屑，可以在这里添加watcher
    onMounted(() => {
      console.log(breadcrumbList.value); // 初始化时打印面包屑列表
    });

    watch(() => route.path, (newVal) => {
      console.log('Route changed to:', newVal);
      // 更新面包屑逻辑...
    });

    return {
      breadcrumbList,
    };
  }
};
</script>

<style>

</style>
